<template>
	<view class="stock">
		<view class="">
			<view v-for="(item, index) in list" :key="index" class="stock-item flex align-center">
				<view class="title">{{ item.name }}</view>
				<u-number-box 
					v-model="item.value"
					:min="0"
					:asyncChange="true"
					:disabled="!hasLogin"
					@change="valChange($event, index)">
				</u-number-box>
			</view>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	import { debounce } from '@/utils/common.js'
	import {
		store
	} from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
		data() {
			return {
				id: '',
				list: []
			}
		},
		computed: {
			hasLogin() {
				return store.hasLogin
			}
		},
		onPullDownRefresh() {
			this.getData()
		},
		onLoad(options) {
			this.id = options.id
			this.getData()
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中...'
				})
				db.collection('hxs-list').doc(this.id).get().then(res => {
					let detail = res.result.data[0]
					this.list = detail.stocks
					uni.setNavigationBarTitle({
						title: `${detail.title}的库存`
					})
				}).finally(() => {
					uni.stopPullDownRefresh()
					uni.hideLoading()
				})
			},
			valChange(e, index) {
				debounce(this.onSave(e, index))
			},
			onSave(e, index) {
			  let item = this.list[index]
			  item.value = e.value
			  db.collection('hxs-list').doc(this.id).update({
			  	stocks: this.list,
			  	updatetime: Date.now()
			  }).then(res => {
			  	// uni.$emit('refreshStock', this.list)
			  }).catch(() => {
				uni.$u.toast('操作失败')
			})
			}
		}
	}
</script>

<style lang="scss" scoped>
.stock {
	padding: 0 30rpx 30rpx;
	&-item {
		padding-top: 40rpx;
		.title {
			width: 100rpx;
			font-size: 30rpx;
			font-weight: bold;
			text-align: right;
			margin-right: 40rpx;
		}
	}
	/deep/ .u-number-box__input {
		width: 240rpx !important;
		// height: 64rpx !important;
	}
}
</style>
